<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>心有灵犀</title>
    </title>
    <!-- 引入 WeUI -->
    <link rel="stylesheet" href="./Public/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./Public/css/zaly.css" /> </head>

</head>

<body ontouchstart="" class="zaly-body">
<div class="wrapper">



<div style="margin-top: 28px;text-align: center">
    <?php for($i=0; $i<$row_num; $i++){ ?>
        <div class="d-flex flex-row justify-content-center" >
            <?php for($j=0; $j<$row_num; $j++) { ?>

                <?php if(isset($game_user_info[$start_num]) && $game_user_info[$start_num]>0 ) {?>

                    <div class="p-2  guess_num  <?php echo $start_num;?>  "   guess-num="<?php echo $start_num;?>" >
                        <?php if(isset($game_user_info[$start_num]['is_right']) && $game_user_info[$start_num]['is_right']>0 ) { ?>
                        <div class="zaly-border zaly-num-right-style  user_photo  <?php echo $game_user_info[$start_num]['site_user_photo'];?> "  user-photo="<?php echo $game_user_info[$start_num]['site_user_photo'];?>" ></div>
                        <?php } else {?>
                        <div class="zaly-border zaly-num-wrong-style  user_photo  <?php echo $game_user_info[$start_num]['site_user_photo'];?> "  user-photo="<?php echo $game_user_info[$start_num]['site_user_photo'];?>" ></div>
                        <?php } ?>
                    </div>

                    <input type="hidden" start_num="<?php echo $start_num++;?>"/>
                <?php } else { ?>
                    <div class="p-2  guess_num <?php echo $start_num;?>  "   guess-num="<?php echo $start_num;?>"  >
                            <button type="button" class="btn zaly-border zaly-num-style new_game "><?php echo $start_num++;?></button>
                    </div>

                <?php } ?>
            <?php } ?>
        </div>
    <?php } ?>

    <input type="hidden" class="chat_session_id" data="<?php echo $chat_session_id;?>">
    <input type="hidden" class="href_type" data="<?php echo $href_type;?>">
    <input type="hidden" class="is_sponsor" data="<?php echo $is_sponsor;?>">
    <input type="hidden" class="game_type" data="<?php echo $game_type;?>">
    <input type="hidden" class="game_num" data="<?php echo $game_num;?>">

</div>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="<?php echo $http_domain;?>/Public/js/zaly.js"></script>

<script type="text/javascript">
    var chatSesssionId = $('.chat_session_id').attr('data');
    var hrefType  = $('.href_type').attr('data');
    var isSponsor = $('.is_sponsor').attr('data');
    var gameType  = $('.game_type').attr('data');

    $(document).on("click", ".guess_num", function(){

        var gameNum   = $('.game_num').attr('data');
        var guessNum  = $(this).attr('guess-num');
        var obj = $(this);

        $.ajax({
            method: "POST",
            url:"<?php echo $http_domain;?>/index.php",
            data: { page_type: "four", chat_session_id : chatSesssionId , href_type:hrefType, guess_num:guessNum, is_sponsor:isSponsor, game_type:gameType, game_num:gameNum},
            success:function (data) {
                if(data.length>1) {
                    var results = JSON.parse(data);
                    if(results['error_code'] == 'fail') {
                        Zaly.tip(results['error_msg'])
                    }
                    if(results['error_code'] == 'success') {
                        $('.game_num').attr('data', results['game_num']);
                        var siteUserPhoto = results['site_user_photo'];
                        var isRight  = results['is_right'];
                        if(siteUserPhoto.length>1) {
                            if(isRight == 1) {
                                var html = "<div class=\"zaly-border zaly-num-right-style  user_photo  "+ siteUserPhoto+" \"  user-photo=\"" + siteUserPhoto + "\" ></div>";
                            } else {
                                var html = "<div class=\"zaly-border zaly-num-wrong-style  user_photo  "+ siteUserPhoto+" \"  user-photo=\"" + siteUserPhoto + "\" ></div>";
                            }
                            obj.html(html);
                            Zaly.reqImageDownload(siteUserPhoto, "jsImageDownload");
                        }
                    }
                }
            },
            fail:function (data) {
            }
        });
        return false;
    });

    $(document).ready(function() {
        var userPhotos = $('.user_photo');
        $.each( userPhotos, function( key, userPhoto ) {
            Zaly.reqImageDownload($(userPhoto).attr('user-photo'), "jsImageDownload");
        });
    });

    function jsImageDownload(result, imageid, imageLocalPath) {
        var osType = Zaly.getOsType();
        if(result == 1) {
            if(osType == 'Android') {
                var html = '<img src="http://akaxin/img' + imageLocalPath + '" style="height:38px; width:38px;border-radius:50%; text-align: center;margin-top: 3px;" " />';
            } else {
                var html = '<img  src="' + imageLocalPath + '" style="height:38px; width:38px;border-radius:50%; text-align: center;margin-top: 3px;" " />';
            }
            $('.'+imageid).html(html);
        }
    }

</script>

</div>
</body>

</html>
